<template>
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" />
        </el-form-item>

        <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="ruleForm.mobile" maxlength="11" show-word-limit />
        </el-form-item>
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref,watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const loading = ref<boolean>(false)

interface RuleForm {
    project_id:number
    name: string
    mobile: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    project_id:0,
    name: '',
    mobile: '',
})


const props = defineProps<{
    data:any
}>()

watch(props,()=>{
    ruleForm.value.project_id = props.data.id
},{ immediate: true })

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 30, message: '范围在2-30字之间', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入简介', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确格式的手机号码', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm.value)
            saveUser()            
        } else {
            console.log('error submit!', fields)
        }
    })
}

const saveUser = () => {
    emit('saveUser')
}

const emit = defineEmits(['saveUser'])
</script>
<style scoped>
</style>
